<template>
   <div class="box">
      <nav>
         <font style="font-size:20px;margin-right:20px;">任务安排</font>
         <input type="text" v-model="inputValue" @keydown.enter="add" placeholder="添加Todo">
         <button @click='addText'>增加</button>
      </nav>
      <h2>正在进行</h2>
      <ul>
         <li v-for="(item,index) in list" :key="index" v-show="item.isSuc == false">
            <input type="checkbox"  @click="change($event,item)" :checked="item.isSuc"> 
            <!--  updateId: 记录当前要修改的元素下标，默认为-1  -->
            <span v-if="updateId != index" @dblclick="update(item, index)">{{item.content}}</span>
            <input v-if="updateId == index" v-model="item.content" >
            <button @click="del(index)">删除</button>
         </li>
      </ul>
      <h2>已经完成</h2>
      <ul>
         <li v-for="(item,index) in list" :key="index" v-show="item.isSuc==true">
            <input type="checkbox" :checked="item.isSuc" @click="change($event,item)">
            <span v-if="updateId != index" @dblclick="update(item, index)">{{item.content}}</span>
            <input v-if="updateId == index" v-model="item.content">
            <button @click="del(index)">删除</button>
         </li>
      </ul>
      <footer >Copyright &copy; 2014 todolist.cn<a @click="clearData()" style="margin-left:20px;color:gray;">clear</a></footer>
   </div>
</template>
<script> 
   export default {
      data() {
         return {
            inputValue: '',  // 输入搜索框的值
            list: [],  // 保存的所有数据列表
            updateId: -1,  // 记录要编辑修改的元素下标
            tempValue: "",  // 临时保存元素的值
         }
      },
      // 初始化   每次刷新会重新加载当前组件，会自动执行该方法
      created() {
         let list = localStorage.list
         if (list) {
            this.list = JSON.parse(list)
         }
      },
      methods: {
          //通过添加按钮进行添加
          addText: function () {
              console.log(this.inputValue);
                this.list.push({
                    content: this.inputValue,
                    isSuc:false
                })
                this.inputValue = '';
            },
         // 搜索框回车  添加数据到---->正在进行
         add() {
            //  非空校验   input值为空的时候  回车无效
            //$.trim()函数用于去除字符串两端的空白字符
            if (this.inputValue.trim() == '') {  
               return
            }
            // 添加数据
            this.list.push({
               content: this.inputValue,
               isSuc: false,
            })
            this.inputValue = '';
            this.save();
            console.log(this.list)
         },
         // 通过复选框判断是否选中，选中了即到已经完成中
         change(event, item) {
            item.isSuc = event.target.checked
            this.save();
         },
         //  删除已有的数据
         del(index) {
            this.list.splice(index, 1)  
            this.save()
         },
         // 双击修改  设置修改状态
         update(item, index) {
            this.updateId = index; // 把要修改的元素下标赋给 updateId
            this.tempValue = item.content; //记录当前元素修改前的文本内容，为了还原使用
         },
        // 修改后保存
         updatesave(item, index) {
            this.updateId = -1; // 还原文本展示的状态  意思是没有要修改的意思
            this.save();
         },
         //  封装存储到本地的方法
         save() {
            localStorage.list = JSON.stringify(this.list)
         },
         //清除已有数据
          clearData () {
              localStorage.clear()
              this.list = []
              }
      },
   }
</script>

<style scoped>
   .box {
            margin: auto;
            width: 500px;
            padding-top: 30px;
            padding-left: 200px;
            background-color:thistle;
            border-radius: 10px;
            border: 1px solid;
        }
        
</style>
